<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        <input type="text" v-model="firstName"><br>
        <input type="text" v-model="lastName"><br>
        <!-- <input type="text" @change="fullName1" v-model="fullName"><br>
        <input type="text" @focus="fullName1" v-model="fullName"><br>
        <input type="text" @blur="fullName1" v-model="fullName"><br> -->
        <input type="text" v-model="fullName1()"><br>
        <input type="text" v-model="fullName">


        <!-- onchange  当input框中的内容发生改变并失去焦点才会触发change事件 
             onfocus   获取焦点就是触发focus事件
             onblur    当失去焦点就会触发blur事件
        -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                msg:'',
                firstName:'a',
                lastName:'b',
                // fullName:''
            },
            methods: {
                fullName1(){
                    console.log('change');
                //    this.fullName = this.firstName +'-'+ this.lastName;
                    return this.firstName + '-' + this.lastName; 
                }
            },
            computed:{//计算属性
                // get方法的简写方式
               /*  fullName(){
                    return this.firstName + '-' + this.lastName;
                } */
                fullName:{
                    // 获取对应的值
                    get(){
                        return this.firstName + '-' + this.lastName;
                    },
                    // 当改变fullName的值则会触发set方法
                    set(value){
                        console.log(value);
                        const arr = value.split('-');
                        console.log(arr);
                        this.firstName = arr[0];
                        this.lastName = arr[1]

                    }
                }
            }
            /* 
            计算属性：计算属性依赖data中的数据进行计算，当计算完毕后将得到的值缓存起来，当依赖的值发生改变则会重新进行计算
            方法methods :每次执行相关逻辑就要调用或者触发事件，触发之后每次都要进行计算
            对于一些高频计算，方法的开销就比较大
            
            */
        })
        console.log(vm);
    </script>
</body>
</html>